'use client';

import { useEffect, useState } from 'react';
import { AlertCircle, Clock } from 'lucide-react';

export function PaymentCountdown() {
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    // Target date: July 10, 2025, 12:00 PM HKT
    const targetDate = new Date('2025-07-10T12:00:00+08:00').getTime();

    const calculateTimeLeft = () => {
      const now = new Date().getTime();
      const difference = targetDate - now;

      if (difference > 0) {
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);

        setTimeLeft({ days, hours, minutes, seconds });
      } else {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
      }
    };

    // Calculate immediately
    calculateTimeLeft();

    // Update every second
    const timer = setInterval(calculateTimeLeft, 1000);

    return () => clearInterval(timer);
  }, []);

  const formatNumber = (num: number) => {
    return num.toString().padStart(2, '0');
  };

  // If countdown is finished
  if (timeLeft.days === 0 && timeLeft.hours === 0 && timeLeft.minutes === 0 && timeLeft.seconds === 0) {
    return null;
  }

  return (
    <div className="relative">
      {/* Glow effect */}
      <div className="absolute inset-0 bg-red-600 blur-lg opacity-30 rounded-lg animate-pulse"></div>
      
      {/* Main container */}
      <div className="relative flex items-center bg-gradient-to-r from-red-600 to-red-700 rounded-lg px-5 py-2.5 shadow-lg border border-red-800">
        <AlertCircle className="h-6 w-6 text-white mr-3 animate-pulse" />
        
        <div className="flex items-center space-x-2">
          <span className="text-white font-bold text-base tracking-wide">付款倒數計時</span>
          <span className="text-red-200">:</span>
          
          <div className="flex items-center space-x-1.5 ml-3">
            {/* Days */}
            <div className="flex flex-col items-center">
              <div className="bg-white text-red-700 px-3 py-1.5 rounded-md font-mono text-lg font-bold shadow-inner">
                {formatNumber(timeLeft.days)}
              </div>
              <span className="text-red-100 font-medium text-xs mt-0.5">天</span>
            </div>
            
            <span className="text-white font-bold text-lg">:</span>
            
            {/* Hours */}
            <div className="flex flex-col items-center">
              <div className="bg-white text-red-700 px-3 py-1.5 rounded-md font-mono text-lg font-bold shadow-inner">
                {formatNumber(timeLeft.hours)}
              </div>
              <span className="text-red-100 font-medium text-xs mt-0.5">時</span>
            </div>
            
            <span className="text-white font-bold text-lg">:</span>
            
            {/* Minutes */}
            <div className="flex flex-col items-center">
              <div className="bg-white text-red-700 px-3 py-1.5 rounded-md font-mono text-lg font-bold shadow-inner">
                {formatNumber(timeLeft.minutes)}
              </div>
              <span className="text-red-100 font-medium text-xs mt-0.5">分</span>
            </div>
            
            <span className="text-white font-bold text-lg">:</span>
            
            {/* Seconds */}
            <div className="flex flex-col items-center">
              <div className="bg-white text-red-700 px-3 py-1.5 rounded-md font-mono text-lg font-bold shadow-inner animate-pulse">
                {formatNumber(timeLeft.seconds)}
              </div>
              <span className="text-red-100 font-medium text-xs mt-0.5">秒</span>
            </div>
          </div>
        </div>
        
        <Clock className="h-5 w-5 text-white ml-3 animate-spin-slow" />
      </div>
    </div>
  );
}